<template>
  <div class="square-screen">
    <squareScreenItems
      :show-data="projectType"
      title="项目分类"
      @updateFilter="handleFilterUpdate"
      ref="defaultChoice1"
    ></squareScreenItems>
    <squareScreenItems
      :show-data="characters"
      title="任务角色"
      @updateFilter="handleFilterUpdate"
      ref="defaultChoice2"
    ></squareScreenItems>
    <span class="more" @click="changeShow">
      <i v-if="isshow">-</i>
      <i v-else>+</i>
      更多筛选条件</span
    >
    <div class="line" v-show="isshow"></div>
    <squareScreenItems
      v-show="isshow"
      :show-data="projectCycle"
      title="任务周期"
      @updateFilter="handleFilterUpdate"
    ></squareScreenItems>
    <squareScreenItems
      v-show="isshow"
      :show-data="projectIncome"
      title="任务积分"
      @updateFilter="handleFilterUpdate"
    ></squareScreenItems>
  </div>
</template>

<script setup lang="ts">
import squareScreenItems from './square-screen-items.vue'
import { onMounted, ref, onUnmounted } from 'vue'
import { projectType, characters, projectCycle, projectIncome } from '@/mock/tasksquare.ts'
import {
  projectTypeToCode,
  charactersToCode,
  projectCycleToCode,
  projectIncomeToCode
} from '@/mock/tasksquare.ts'
import useMainStore from '../../../../store/main/main'

// 默认
const queryParams = ref({
  projectType: '',
  taskRole: '',
  taskPeriod: 100000000000,
  taskScoreMax: 100000000000,
  taskScoreMin: 0
})
const emit = defineEmits(['updateQueryParams'])
const handleFilterUpdate = (data: { filterType: string; value: any }) => {
  // console.log(data) // 打印传递的值
  if (data.filterType === '项目分类') {
    queryParams.value.projectType = projectTypeToCode[data.value] ?? ''
  } else if (data.filterType === '任务角色') {
    queryParams.value.taskRole = charactersToCode[data.value] ?? ''
  } else if (data.filterType === '任务周期') {
    queryParams.value.taskPeriod = projectCycleToCode[data.value] ?? 100000000000
  } else if (data.filterType === '任务积分') {
    const [min, max] = projectIncomeToCode[data.value].split(',').map(Number)
    queryParams.value.taskScoreMin = min ?? 0
    queryParams.value.taskScoreMax = max ?? 100000000000
  }
  emit('updateQueryParams', queryParams.value)
  // console.log(queryParams.value) // 打印最终的值
}

let isshow = ref(0)
const changeShow = () => {
  isshow.value = ~isshow.value
}
// 通过调用子组件的isClick方法，让指定按钮默认选中
const defaultChoice1 = ref()
const defaultChoice2 = ref()
const defaultChoiceMethad = () => {
  defaultChoice1.value.isClick(0)
  defaultChoice2.value.isClick(0)
}
onMounted(() => {
  // const defaultitem = useMainStore().choiseItem
  defaultChoiceMethad()
  // 解决每次路由跳转都不是顶部
  window.scrollTo(0, 0)
})
//当离开square页面，将index归0，让下一次进入时，选中的是全部
onUnmounted(() => {
  useMainStore().choiseItem = 0
})
</script>

<style lang="less" scoped>
.square-screen {
  box-sizing: border-box;
  width: 850px;
  background-color: #fff;
  border-radius: 10px;
  padding: 25px 0 20px 0;
  margin-bottom: 20px;

  .more {
    position: relative;
    float: right;
    margin-top: -5px;
    margin-right: 30px;
    color: #2d59a2;
    font-size: 1rem;
    cursor: pointer;
  }
  .line {
    width: 95%;
    border: 1px solid #eff2f7;
    margin: 20px 20px;
  }
}
</style>
